<template>
  <div class="home">
    <div class="top">
      <van-image round width="5rem" class="img" height="5rem" :src="data.from.avatar" />
      <div>
        <p>{{ data.from.account }}</p>
        <p> <van-icon name="records" /></p>
      </div>
    </div>
    <ul class="ul">
      <li>
        <p>{{ data.from.collectionNumber }}</p><span>收藏</span>
      </li>
      <li>
        <p>{{ data.from.likeNumber }}</p><span>关注</span>
      </li>
      <li>
        <p>{{ data.from.score }}</p><span>积分</span>
      </li>
      <li>
        <p>{{ data.from.couponNumber }}</p><span>优惠卷</span>
      </li>
    </ul>
    <div class="con">
      <div class="con-top">
        <h3>药品订单</h3>
        <p>全部订单></p>
      </div>
      <ul class="con-ul">
          <li><img class="li-img" src="" alt=""><p>待付款</p></li>
          <li><img class="li-img" src="" alt=""><p>待发货</p></li>
          <li><img class="li-img" src="" alt=""><p>待收货</p></li>
          <li><img class="li-img" src="" alt=""><p>已完成</p></li>
        </ul>
    </div>
    <div class="foot">
      <h3>快捷工具</h3>
      <ul class="foot-ul">
        <li><van-icon name="idcard" /><span>我的问诊</span><p><van-icon name="arrow" /></p></li>
        <li><van-icon name="add-o" /><span>我的处方</span><p><van-icon name="arrow" /></p></li>
        <li><van-icon name="manager-o" /><span>家庭档案</span><p><van-icon name="arrow" /></p></li>
        <li><van-icon name="location-o" /><span>地址管理</span><p><van-icon name="arrow" /></p></li>
        <li><van-icon name="edit" /><span>我的评价</span><p><van-icon name="arrow" /></p></li>
        <li><van-icon name="service-o" /><span>官方客服</span><p><van-icon name="arrow" /></p></li>
        <li><van-icon name="setting-o" /><span>设置</span><p><van-icon name="arrow" /></p></li>
      </ul>
    </div>
    <p class="retun" @click="rer">退出登录</p>
  </div>
</template>

<script lang='ts'  setup>
import { getuser } from "../utlis/api"
import { ref, reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const data = reactive({
  from: {
    avatar: "",
    account: "",
    likeNumber: "",
    collectionNumber: "",
    score: "",
    couponNumber: ""
  }
})
getuser().then(res => {
  console.log(20, res);
  data.from = res.data
})
const rer=()=>{
  localStorage.removeItem("token")
  router.push("/login")
}
</script>

<style scoped>
.home{
  width: 100%;
  padding:20px;
  box-sizing: border-box;
  background-image: linear-gradient(#2fdfc2, #daf6f1,#ccc);
}
.top {
  width: 100%;
  height: 240px;
  display: flex;
}

.top p {
  margin-left: 20px;
}

.img {
  margin: 30px 0 0 20px;
}
.ul{
  margin-top: -130px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
}
.ul>li{
  text-align: center;
}
.li-img{
  width: 30px;
  height: 30px;
}
.con{
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
}
.con-top{
  padding: 0 10px;
  box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .con-ul{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
.foot{
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 0 10px;
  box-sizing: border-box;
}
.foot-ul{
  width: 100%;
}
.foot-ul>li{
  display: flex;
  width: 100%;
  height: 40px;
  justify-content: space-between;
  align-items: center;
}
.foot p{
  width: 70%;
  text-align: right;
}
.retun{
  width: 100%;
  text-align: center;
  color: red;
}
</style>